<template lang="">
    <div>
      <mt-swipe :auto="3000">
          <mt-swipe-item 
            v-for='item in photoList' 
            :key='item.id' 
            :style="{background:'url('+item.images.large+')',backgroundSize:'auto 100%'}"
            >
              <img referrerpolicy ="never" :src="item.images.medium">
          </mt-swipe-item>
      </mt-swipe>
      <ul class="mui-table-view mui-grid-view mui-grid-9">
		      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" 
           v-for="item in indexList"
           >
              <routerLink :to="item.Link">
		          <span class="mui-icon" :class="item.icon"></span>
		          <div class="mui-media-body">{{ item.Info }}</div>
              </routerLink>
          </li>
		  </ul> 
    </div>
</template>
<script>
import indexInfo from './tabbarJSON/indexInfo.json'
export default {
    data() {
        return {
            photoList: [],
            indexList: indexInfo,
        };
    },
    created() {
        this.getphotoList();
    },
    methods: {
        getphotoList() {
        // 配置了根路径，前面不能带斜线
            this.$http.get("v2/movie/coming_soon?start=0&count=4").then(result => {
              this.photoList = result.body.subjects;
              console.log(this.photo);
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.mint-swipe {
  height: 200px;
  text-align: center;

  .mint-swipe-item {
    width: 100%;
    height: 100%;
    z-index: 0;
    position: relative;
    box-sizing: border-box;

    &:after {
      width: 100%;
      height: 100%;
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      background: inherit;
      z-index: 1;
      filter: blur(6px);
    }

    img {
      position: relative;
      z-index: 11;
      height: 100%;
    }
  }
}
</style>